<template>
    <Search @search="search" />
    <Desc v-if="isShow && begain" :descs="descs" />
    <div id="content" v-if="isShow && begain">
        <!-- 流向记录 -->
        <div id="flow">
            <h2 class="title content-title">售达客户</h2>
            <div class="customer">
                <div
                    :class="['customer-item', index != flow.length - 1 ? 'uderline' : '']"
                    v-for="(item, index) in customer"
                    :key="index"
                >
                    {{ item }}
                </div>
            </div>
            <h2 class="content-title">销售流向记录</h2>
            <div class="place">
                <div
                    :class="['place-item', index != flow.length - 1 ? 'uderline' : '']"
                    v-for="(item, index) in flow"
                    :key="index"
                >
                    <span>{{ item.place }}</span>
                    <span style="color: #999">{{ item.time }}</span>
                </div>
            </div>
            <div class="btn-box"><button class="btn-record">流向统计</button></div>
        </div>
    </div>
    <!-- 暂无记录 -->
    <div id="none" v-else-if="!isShow && begain">暂无搜索记录</div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'
import Search from '@/components/Search.vue'
import Desc from '@/components/Desc.vue'

export default defineComponent({
    name: 'Flow',
    emits: ['search'],
    components: { Search, Desc },
    setup() {
        const data = reactive({
            descs: '【销售流向】 该产品已经累计被扫描51次，在26个不同的地理区域被扫描过，请谨慎购买！',
            begain: false,
            isShow: false,
            customer: ['深圳市圣宁医疗器械有限公司', '深圳市福田区梅林街道梅丰社区梅花山庄'],
            flow: [
                { place: '浙江省杭州市下城区石楼路', time: '2022-03-24  11:13:55' },
                { place: '浙江省杭州市下城区石楼路', time: '2022-03-24  11:13:55' },
                { place: '湖北省武汉市阳逻区武阳大道', time: '2022-03-24  11:13:55' },
                { place: '湖北省武汉市阳逻区武阳大道', time: '2022-03-24  11:13:55' },
                { place: '湖北省武汉市阳逻区武阳大道', time: '2022-03-24  11:13:55' }
            ]
        })
        const search = value => {
            console.log(value)
            if (!value) {
                data.begain = false
            } else {
                if (value !== '123') {
                    data.begain = true
                    data.isShow = false
                } else {
                    data.begain = true
                    data.isShow = true
                }
            }
        }
        return {
            ...toRefs(data),
            search
        }
    }
})
</script>

<style scoped lang="scss">
@import '@/assets/css/global.scss';

#content {
    display: flex;
    margin-top: 140px;
    margin-bottom: 75px;

    #flow {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;

        .title {
            margin-top: 36px;
        }

        div {
            width: 100%;
        }

        .customer,
        .place {
            overflow: hidden;
            border-radius: 20px;
        }

        .customer {
            margin: 16px 0 24px 0;
        }

        .place {
            margin-top: 16px;
        }

        .customer-item,
        .place-item {
            font-size: 14px;
            background-color: white;
        }

        .customer-item {
            display: flex;
            align-content: center;
            align-items: center;
            height: 50px;
            padding-left: 16px;
        }

        .place-item {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: space-evenly;
            height: 60px;
            padding-left: 20px;
        }

        .btn-box {
            position: fixed;
            bottom: 0;
            left: 20px;
            width: calc(100vw - 40px);
            height: 65px;
            background-color: #f7f9fb;

            .btn-record {
                width: 100%;
                height: 55px;
                margin-bottom: 10px;
                font-size: 16px;
                color: white;
                text-align: center;
                background-color: #0fbda6;
                border: none;
                border-radius: 18px;
                outline: none;
            }
        }
    }
}

#none {
    width: 100%;
    height: 50px;
    margin-top: 96px;
    font-size: 16px;
    color: #999;
}

.uderline {
    border-bottom: 1px solid #eee;
}
</style>
